<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <div class="app">
    <h1>我是App组件</h1>
    <h2>汽车名称：{{ name }}</h2>
    <h2>汽车价格：{{ price }}</h2>
    <hr>
  </div>
</template>

<script>
import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref, toRefs} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // 使用Vue提供的reactive
    let car = reactive({
      name: '奔驰',
      price: '50W'
    })
    let sum = ref(0);
    let car2 = readonly(car);

    // - isRef: 检查一个值是否为一个 ref 对象。
    console.log(isRef(sum));

    // - isReactive: 检查一个对象是否是由 reactive 创建的响应式代理。
    console.log(isReactive(car));

    // - isReadonly: 检查一个对象是否是由 readonly 创建的只读代理。
    console.log(isReadonly(car2));

    // - isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。
    console.log(isProxy(car));

    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
.app {
  background: #8549da;
  padding: 20px;
}
</style>
